<div class="sticky top-[68px] pb-6 pt-2">
    <!-- Syntax Preference Switcher -->
    <div class="flex items-center space-x-1.5 mb-4">
        <div class="text-xs font-semibold uppercase tracking-wider text-gray-500">docs syntax</div>
        <div class="relative" x-data="{ showPopover: false }" @mouseenter="showPopover = true" @mouseleave="showPopover = false">
            <button
                class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
            >
                <c-tablericon.info-circle class="size-4" stroke_width="2" />
            </button>
            <div
                x-show="showPopover"
                x-transition
                x-cloak
                class="absolute left-0 top-6 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-3 text-xs text-gray-600 dark:text-gray-400 z-50"
            >
                <div class="space-y-2">
                    <div>
                        <span class="font-semibold">HTML:</span> Snippets will be shown in HTML-like syntax.
                    </div>
                    <div>
                        <span class="font-semibold">Native:</span> Snippets will be shown in native Django template syntax.
                    </div>
                </div>
                <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                    <a href="{% url 'usage-patterns' %}#tag-syntax" class="text-teal-600 dark:text-teal-600 text-xs font-medium">
                        More info
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-3 pb-3 border-bborder-gray-200 dark:border-gray-700" x-data>
        <div class="flex items-center justify-between mb-1 w-full">

            <div class="flex w-full bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5 gap-0.5">
                <!-- Buttons with individual backgrounds -->
                <button
                    @click="$store.syntaxPreference = 'html'"
                    class="w-full px-2.5 py-1 text-sm transition-all duration-200 rounded-md min-w-[2rem]"
                    :class="$store.syntaxPreference === 'html'
                        ? 'bg-teal-600/20 text-teal-600 font-semibold'
                        : 'text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'"
                >
                    <span>HTML</span>&nbsp;&nbsp;<span>&lt;/&gt;</span>
                </button>
                <button
                    @click="$store.syntaxPreference = 'template'"
                    class="w-full px-2.5 py-1 text-sm transition-all duration-200 rounded-md min-w-[2rem]"
                    :class="$store.syntaxPreference === 'template'
                        ? 'bg-teal-600/20 text-teal-600 font-semibold'
                        : 'text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'"
                >
                    <span>Native</span>&nbsp;&nbsp;<span>&#37;}</span>
                </button>
            </div>
        </div>
    </div>

    <c-sidebar-block>
        <c-slot name="title">Getting Started</c-slot>
        <ul>
            <c-sidebar-link url="{% url 'quickstart' %}">
                Quickstart
            </c-sidebar-link>
            <c-sidebar-link url="{% url 'components' %}">
                Components
            </c-sidebar-link>
            <c-sidebar-link url="{% url 'usage-patterns' %}">
                Usage Patterns
            </c-sidebar-link>
            <c-sidebar-link url="{% url 'configuration' %}">
                Configuration
            </c-sidebar-link>
        </ul>
    </c-sidebar-block>
    <c-sidebar-block>
        <c-slot name="title">Examples</c-slot>
        <ul>
            <c-sidebar-link url="{% url 'form-fields' %}">
                Form Inputs
            </c-sidebar-link>
            <c-sidebar-link url="{% url 'alpine-js' %}">
                Tabs with Alpine.js
            </c-sidebar-link>
            <c-sidebar-link url="{% url 'layouts' %}">
                Layouts
            </c-sidebar-link>
            <c-sidebar-link url="{% url 'icons' %}">
                Icons
            </c-sidebar-link>
        </ul>
    </c-sidebar-block>
    <c-sidebar-block>
        <c-slot name="title">More</c-slot>
        <ul>
            <c-sidebar-link url="{% url 'django-template-partials' %}">
                Django Template Partials
            </c-sidebar-link>
        </ul>
    </c-sidebar-block>
</div>